<template>
  <div class="mobile-anniversary-detail common-mobile-view">
    <el-form ref="formRef" :model="anniversaryStore.currentAnniversary"
             :rules="rules" label-width="60px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="anniversaryStore.currentAnniversary.title" autocomplete="off"
                  placeholder="请输入标题" clearable
                  show-word-limit maxlength="10">
        </el-input>
      </el-form-item>

      <el-form-item label="日期" prop="date">
        <el-date-picker
            v-model="anniversaryStore.currentAnniversary.date"
            type="date" :editable="false" placeholder="请选择日期"
            value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="anniversaryStore.currentAnniversary.type"
                        @change="changeTypeEvent">
          <el-radio v-for="(item, index) in dateTypeList"
                    :value="item.value" :key="index" :label="item.label">
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="重复" prop="recurring">
        <el-switch
            v-model="anniversaryStore.currentAnniversary.recurring"
            inline-prompt active-text="是" inactive-text="否"
            :disabled="anniversaryStore.currentAnniversary.type === 'countUp'"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </el-form-item>

      <el-form-item label="分类" prop="category">
        <el-select v-model="anniversaryStore.currentAnniversary.category"
                   placeholder="请选择分类" clearable>
          <el-option
              v-for="(item, index) in anniversaryCategoryMap.keys()"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="anniversaryStore.anniversaryApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAnniversaryStore } from '@/store/anniversary.ts'
import { useAppStore } from '@/store/app.ts'
import { FormRules } from 'element-plus'
import { anniversaryRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil.ts'

const formRef = ref()
const rules = reactive<FormRules>(anniversaryRules)
const anniversaryStore = useAnniversaryStore()
const appStore = useAppStore()

const dateTypeList = [{
  value: 'countDown',
  label: '倒数日'
}, {
  value: 'countUp',
  label: '正数日'
}]

onMounted(async () => {
  appStore.isShowMobileBack = true
})

const changeTypeEvent = (value: string) => {
  if (value === 'countUp') {
    anniversaryStore.currentAnniversary.recurring = false
  }
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该纪念日内容?').then(async () => {
    anniversaryStore.anniversaryApiType = 'DELETE'
    await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
    history.back()
  })
}
</script>

<style scoped lang="scss">
.mobile-anniversary-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
